<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="selection" align="center" width="55">
    </el-table-column>
    <el-table-column
      align="center"
      :prop="index"
      :label="item"
      v-for="(item, index) in tableLable"
      :key="index"
    >
    </el-table-column>
    <el-table-column label="操作" width="100" align="center">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small"
          >编辑</el-button
        >
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },

  data() {
    return {
      tableData: [
        {
          name: "华为P30",
          prain: "4500￥",
          color: "亮黑",
          capacity: "8GB+128GB",
        },
        {
          name: "小米11",
          prain: "3500￥",
          color: "银白",
          capacity: "8GB+128GB",
        },
        {
          name: "oppo11",
          prain: "4000￥",
          color: "白色",
          capacity: "8GB+128GB",
        },
        {
          name: "魅族18X",
          prain: "2400￥",
          color: "岚",
          capacity: "8GB+128GB",
        },
      ],
      tableLable: {
        name: "名称",
        prain: "价格",
        color: "机身颜色",
        capacity: "存储容量",
      },
    };
  },
};
</script>

<style>
</style>